
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));
Vue.component('chat-message', require('./components/ChatMessage.vue'));
Vue.component('chat-log', require('./components/ChatLog.vue'));
Vue.component('chat-composer', require('./components/ChatComposer.vue'));

const app = new Vue({
    // 挂载到id=app的element上 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
    // 可以是 CSS 选择器，也可以是一个 HTMLElement 实例
    el: '#app',
    data: {
        messages: [],
        usersInRoom: []
    },
    methods: {
        addMessage(message) {
            // Add to existing messages
            this.messages.push(message);

            // Persist to the database etc
            axios.post('/messages', message).then(response => {
                // Do whatever;
            })
        }
    },
    //生命周期钩子
    created() {
        axios.get('/messages').then(response => {
            this.messages = response.data;
            console.log('生命周期钩子-messages: ' + response.data.message);
        });

        //我们加入一个存在频道，然后提供一个回调在用户加载页面或者当有其他用户加入或离开时触发
        //here会在这三个事件时都触发，此外，还可以进行更加细粒度的控制
        //可以监听then（当前用户加入）
        //joining（其他用户加入）
        //leaving（其他用户离开）

        //here 回调函数会在你成功加入频道后被立即执行，它接收一个包含用户信息的数组，用来告知当前订阅在该频道上的其他用户。
        // joining 方法会在其他新用户加入到频道时被执行，
        // leaving 会在其他用户退出频道时被执行。

        // 加入 presence 频道
        // join 方法会返回一个实现了 PresenceChannel 的对象，它通过暴露 listen 方法，允许你订阅 here、joining 和 leaving 事件
        Echo.join('chatroom')
            .here((users) => {
                this.usersInRoom = users;
            })
            .joining((user) => {
                this.usersInRoom.push(user);
            })
            .leaving((user) => {
                this.usersInRoom = this.usersInRoom.filter(u => u != user)
            })
            //.listen('MessagePosted', (e) => {
            .listen('.server.created', (e) => {
                console.log(e.message);
                console.log(e.user);
                this.messages.push({
                    message: e.message.message,
                    user: e.user
                });
            });


    }
});
